<template>
  <div class="header-info">
    <!--区域设置-->
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">区域设置</el-divider>
      </div>
      <el-form-item label="区域高度">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo.headHeight"
        />
      </el-form-item>
      <el-form-item label="背景颜色">
        <el-color-picker
            size="small"
            show-alpha
            :predefine="predefineColors"
            v-model="optionsInfo.backgroundColor"
        />
      </el-form-item>
    </div>
    <!--科室设置-->
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">科室设置显示</el-divider>
      </div>
      <el-form-item
          label="科室号别设定"
          class="dept-number-room-set"
      >
        <el-checkbox-group :max="2" v-if="topOptions && topOptions.length" v-model="optionsInfo.checkList">
          <el-checkbox
              v-for="item in topOptions"
              :label="item.value"
              :key="item.value"
              :disabled="item.value === 3"
          >
            {{ item.label }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <!--诊室选中字段-->
      <template v-if="optionsInfo['checkList'].includes(3)">
        <roomNameKeyEditor
            :designer="designer"
            :selected-widget="selectedWidget"
            :option-model="optionModel"
        />
      </template>

      <el-form-item label="科室(号别)&诊室位置反置" class="follow-dept">
        <el-switch
            v-model="optionsInfo.deptRoomPosition"
            :disabled="optionsInfo?.checkList?.length === 1"
        />
      </el-form-item>

      <template v-if="optionsInfo.checkList.includes(2) &&!!registerObjNameOptions?.length">
        <div class="title">
          <el-divider content-position="center">号别信息</el-divider>
        </div>
        <el-form-item label="号别类型" class="register-info">
          <div class="options-info">
            <el-radio-group v-model="optionsInfo.registerObjNameKey">
              <el-radio
                  :label="item.dictValue"
                  :value="item.dictValue"
                  :key="item.dictValue"
                  v-for="item in registerObjNameOptions"
              >
                {{ item.dictLabel }}
              </el-radio>
            </el-radio-group>
          </div>
        </el-form-item>
        <el-form-item label="号别来源" class="register-info">
          <el-select
              v-model="optionsInfo['registerSource']"
              placeholder="请选择"
          >
            <el-option
                v-for="item in registerSourceOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                v-if="!item.disabled"
                :disabled="item.disabled"
            >
              {{ item.label }}
              <template v-if="!item.disabled">
                <el-tooltip
                    class="item"
                    effect="dark"
                    content="Bottom Center 提示文字"
                    placement="bottom"
                >
                  <div slot="content">
                    如果当前患者不存在则取当前医生关联的上一个就诊患者
                  </div>
                  <el-button class="tooltip-icon">
                    <i class="el-icon-warning"/>
                  </el-button>
                </el-tooltip>
              </template>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item
            label="若无当前患者是否取关联科室的号别"
            class="follow-dept"
            v-if="optionsInfo['registerSource'] === 1 || optionsInfo['registerSource'] === 2"
        >
          <el-switch v-model="optionsInfo.relationRegister"/>
        </el-form-item>
      </template>
    </div>
    <!--医生设置-->
    <div class="list-item-setting" v-if="!optionsInfo.doctorConfig">
      <div class="title-info">
        <el-divider content-position="left">医生设置</el-divider>
      </div>
      <el-form-item label="医生显示设置" class="follow-dept">
        <el-select v-model="optionsInfo['doctorOrder']" placeholder="请选择">
          <el-option
              v-for="item in doctorShown"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item
          label="医生名字粗细设置"
          class="follow-dept"
          v-if="optionsInfo.doctorFontWeight"
      >
        <el-select
            v-model="optionsInfo['doctorFontWeight']"
            placeholder="请选择"
        >
          <el-option
              v-for="item in fontWeightOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </div>
    <!--候诊就诊设置-->
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">候诊就诊设置</el-divider>
      </div>

      <el-form-item label="就诊患者">
        <el-input
            size="small"
            class="hide-spin-button"
            v-model="optionsInfo['currentPatientSign']"
        />
      </el-form-item>
      <el-form-item label="待诊患者">
        <el-input
            size="small"
            class="hide-spin-button"
            v-model="optionsInfo['waitPatientSign']"
        />
      </el-form-item>
      <template v-if="!optionsInfo.waitingPatientHide">
        <el-form-item label="候诊类型设置" class="wait-patient-set">
          <el-radio-group
              v-model="optionsInfo.waitPatientType"
          >
            <el-radio
                :label="item.value"
                v-for="item in waitPatientTypeOptions"
                :key="item.value"
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="候诊就诊" class="wait-patient-set">
          <el-radio-group v-model="optionsInfo.waitMode">
            <el-radio
                :label="item.value"
                v-for="item in patientNumberOptions"
                :key="item.value"
                v-if="item.value<=2"
            >
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </template>
    </div>
  </div>
</template>

<script>
import constantDic from "@/utils/vue-i18n/lang/zh-CN";
import roomNameKeyEditor
  from "@sc/templateDetails/modules/homeRight/property-editor/module/scene-edit/basicInfo/roomNameKey-editor.vue";
import UpdatePicture from "@c/public/layer/template/updatePicture/index.vue";
import * as types from "@c/public/form-designer/devType/datas-types";

export default {
  name: "sceneDRCSingleInfoConfig-editor",

  componentName: "sceneDRCSingleInfoConfig-editor",

  components: {UpdatePicture, roomNameKeyEditor},

  mixins: [],

  props: {
    designer: Object,
    selectedWidget: Object,
    optionModel: Object,
  },

  inject: ["serverFieldList", "getDesignerConfig"],

  data() {
    return {
      radio: 1,
      optionsInfo: Object(),
      checkList: [],
      constantDic: constantDic,
      topOptions: types['topOptions'],
      predefineColors: types["predefineColors"],
      doctorShown: types['doctorOrderOptions'],
      fontWeightOptions: types["fontWeightOptions"],
      patientNumberOptions: types['patientNumberOptions2'],
      registerSourceOptions: types['registerSourceOptions'],
      waitPatientTypeOptions: types['waitPatientTypeOptions2'],
    };
  },

  computed: {
    registerObjNameOptions() {
      return this.$store.getters["templateDetails/getRegisterObjNameOptions"];
    },
  },

  methods: {},

  watch: {
    // 组件的所有信息
    optionModel: {
      handler: function (val) {
        this.optionsInfo = val[val.config];
      },
      deep: true,
      immediate: true,
    },
  },
};
</script>


<style lang="scss" scoped>
//候诊&就诊等待
.wait-patient-set {
  display: flex;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;

    .el-radio-group {
      display: flex;
      flex-direction: column;

      .el-radio {
        padding: 10px 0;
      }
    }
  }
}

.follow-dept {
  display: flex;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
    margin-bottom: 8px;
    @include fontWeight();
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;
  }
}

//科室 诊室 号别
.dept-number-room-set {
  display: flex;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
    margin-bottom: 8px;
    @include fontWeight();
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;

    .el-checkbox-group {
      display: flex;
      flex-direction: column;
    }
  }
}

//号别简称
.register-info {
  :deep(.el-form-item__content) {
    margin-left: 1px !important;

    .title {
      width: 100%;
    }

    .el-radio-group {
      .el-radio {
        width: 100%;
        padding: 8px 0;
      }
    }
  }
}

//互联网医院
.logo-area-set {
  display: flex;
  position: relative;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
    display: flex;
    @include fontWeight();
  }

  :deep(.el-form-item__content) {
    margin-left: 0 !important;

    .el-button {
      position: absolute;
      top: -30px;
      right: 0;
    }

    .picture-wrap {
      margin-top: 10px;
      position: relative;
      overflow: hidden;
      width: 108px;
      height: 108px;

      img {
        border-radius: 4px;
        overflow: hidden;
        width: 100%;
      }

      .icon-wrap {
        width: 20px;
        height: 20px;
        display: flex;
        align-items: center;
        align-self: center;
        justify-content: center;
        background: rgba(0, 0, 0, 0.4);
        position: absolute;
        top: 0;
        left: 0;
        cursor: pointer;
        border-radius: 0 0 100px 0;

        .icon-delete {
          font-weight: bold;
          color: rgba(255, 255, 255, 0.8);
        }
      }

      .el-upload {
        background-color: #fbfdff;
        border: 1px dashed #c0ccda;
        border-radius: 6px;
        box-sizing: border-box;
        width: 108px;
        height: 108px;
        cursor: pointer;
        line-height: 116px;
        vertical-align: top;

        &:hover {
          border-color: #409eff;
          color: #409eff;
        }

        .el-icon-plus {
          font-size: 1.25rem;
          color: rgba(0, 0, 0, 0.45);
        }
      }
    }
  }
}

.tooltip-icon {
  border: none;
  background: transparent;
  padding: 0 12px 0 12px;
  font-size: 18px;
  border-radius: 0;
  color: #e6a23c;
}
</style>